<template>
  <div id="add-friend-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">添加好友</h1>
    </header>
    <div class="add-friend-panel margin-top-60">
      <input
        type="search"
        v-model="search_key"
        v-on:input="searchUser"
        class="mui-input-clear"
        placeholder="请输入ID\昵称\邮箱\手机号"
        data-input-clear="1"
        data-input-search="1"
      />
    </div>
    <div class="search-user-panel margin-top-40">
      <span v-if="searchList.length > 0" class="search-num"> 
        搜到关于 
        <span class="mui-badge mui-badge-danger">{{ search_key }}</span>
        共有 {{ searchList.length }}  个用户：
        </span> 
      <ul class="mui-table-view">
        <li v-for="searchItem in searchList" class="mui-table-view-cell mui-media">
          <a class="mui-navigate-right" @click="goAddFriendPush(searchItem.user_id)">
            <img class="mui-media-object mui-pull-left" :src="searchItem.user_header" />
            <div class="mui-media-body">
              {{ searchItem.user_name }} <span class="user_id">({{ searchItem.user_id }})</span>
              <p class="mui-ellipsis">
                <span>男</span>
                <span>{{ searchItem.user_age }}</span>
                <span>{{ searchItem.user_address }}</span>
                </p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";

export default {
  data() {
    return {
      search_key: "",
      searchList: [],

    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },
    goAddFriendPush : function(user_id){
      this.$router.push({
        path : '/FriendCard',
        query : {
          friend_id : user_id
        }
      });
    },
    searchUser: function() {
      var search_key = this.search_key;
      if (search_key == "") return false;
      if(!isNaN(search_key) && search_key.length < 2){
        return false;
      }
      
      axios({
        url : api.user.getUsersByKey,
        method : 'post',
        data : {
          search_key : this.search_key
        }
      }).then((res) => {
          this.searchList = res.data.data;
      });
    }
  }
};
</script>
<style>
.search-user-panel .mui-ellipsis span{
  margin-right: 8px;
}
.search-user-panel .search-user-action{
display: flex;
  flex-wrap: nowrap;
  position: absolute;
  right: 3px;
  top: 13px;
  line-height: 40px;
}
.search-user-panel .search-user-action span{
  font-size: 14px;
  margin-right: 10px;
  color: #8f8f94;
}
.search-user-panel .search-user-action button{
  margin-right: 5px;
}
.search-user-panel span.user_id{
  font-size: 12px;
  color: #8f8f94;
}
.search-user-panel  .search-num{
  font-size: 16px;
  margin-left: 10px;
  margin-bottom: 10px;
  line-height: 30px;
}
.search-user-panel .mui-badge{
  margin:0 3px;
}
</style>